<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!-- th:fragment 定义需要引入的代码块，该div包含的内容即为引用的公共内容 -->
<div th:fragment="header(cartList, totalMoney)">
    <header class="header-area header-default sticky-header" style="background-color: rgba(222,225,230,0.78)">
        <!--        <h1 id="test_h">11111111111111111111111111111111111111111</h1>-->
        <!--        <button id="test_btn">测试</button>-->
        <div class="container" >
            <div class="row align-items-center">
                <div class="col-6 col-sm-4 col-lg-3">
                    <div class="header-logo-area">
                        <a th:href="@{index.html}">
                            <img class="logo-main" th:src="@{/user/img/logo.png}" alt="Logo" />
                            <img class="logo d-none" th:src="@{/user/img/logo-light.png}" alt="Logo" />
                        </a>
                    </div>
                </div>

                <div class="col-sm-4 col-lg-7 d-none d-lg-block" style="color: white">
                    <div class="header-navigation-area">
                        <ul class="main-menu nav position-relative">
                            <li class="has-submenu"><a th:href="@{index.html}">Home</a>
                                <ul class="submenu-nav">
                                    <li><a th:href="@{index.html}">Home Demo 1</a></li>
                                    <li><a th:href="@{index-two.html}">Home Demo 2</a></li>
                                </ul>
                            </li>
                            <li class="has-submenu full-width"><a th:href="@{shop.html}">Shop</a>
                                <ul class="submenu-nav submenu-nav-mega">
                                    <li class="mega-menu-item"><a th:href="@{#/}" class="mega-title">Shop Pages</a>
                                        <ul>
                                            <li><a th:href="@{shop-3-grid.html}">Shop 3 Column</a></li>
                                            <li><a th:href="@{shop-4-grid.html}">Shop 4 Column</a></li>
                                            <li><a th:href="@{shop-left-sidebar.html}">Shop Left Sidebar</a></li>
                                            <li><a th:href="@{/tProduct/products?offset=0&limit=6}">Shop Right Sidebar</a></li>
                                            <li><a th:href="@{shop-list.html}">Shop Listing View</a></li>
                                            <li><a th:href="@{shop-list-left-sidebar.html}">Shop List left Sidebar</a></li>
                                            <li><a th:href="@{shop-list-right-sidebar.html}">Shop List Right Sidebar</a></li>
                                        </ul>
                                    </li>
                                    <li class="mega-menu-item"><a href="#/" class="mega-title">WOMEN</a>
                                        <ul>
                                            <li><a href="single-product-name-1.html">Bags &amp; Purses</a></li>
                                            <li><a href="single-product-name-1.html">Beauty</a></li>
                                            <li><a href="single-product-name-1.html">Coats &amp; Jackets</a></li>
                                            <li><a href="single-product-name-1.html">Curve &amp; Plus Size</a></li>
                                            <li><a href="single-product-name-1.html">Denim</a></li>
                                        </ul>
                                    </li>
                                    <li class="mega-menu-item"><a href="#/" class="mega-title">MEN</a>
                                        <ul>
                                            <li><a th:href="@{single-product-name-1.html}">Bags</a></li>
                                            <li><a th:href="@{single-product-name-1.html}">Blazers</a></li>
                                            <li><a th:href="@{single-product-name-1.html}">Caps &amp; Hats</a></li>
                                            <li><a th:href="@{single-product-name-1.html}">Gifts</a></li>
                                            <li><a th:href="@{single-product-name-1.html}">Grooming</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-submenu"><a th:href="@{#/}">Products</a>
                                <ul class="submenu-nav">
                                    <li><a th:href="@{/single-product-simple.html}">Simple Product</a></li>
                                    <li><a th:href="@{single-product.html}">Variable Product</a></li>
                                    <li><a th:href="@{single-product-affiliate.html}">Affiliate Link product</a></li>
                                    <li><a th:href="@{single-product-soldout.html}">Soldout Product</a></li>
                                    <li><a th:href="@{single-product-countdown.html}">Countdown Product</a></li>
                                </ul>
                            </li>
                            <li class="has-submenu"><a th:href="@{#/}">Blog</a>
                                <ul class="submenu-nav">
                                    <li><a th:href="@{blog-left-sidebar.html}">Blog Left Sidebar</a></li>
                                    <li><a th:href="@{blog.html}">Blog Right Sidebar</a></li>
                                    <li><a th:href="@{blog-grid.html}">Blog Grid Layout</a></li>
                                    <li><a th:href="@{single-blog.html}">Single Blog Left Sidebar</a></li>
                                    <li><a th:href="@{single-blog-right-sidebar.html}">Single Blog Right Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a th:href="@{contact.html}">Contact</a></li>
                            <li><a th:href="@{about-us.html}">About</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-sm-7 col-lg-2 d-none d-sm-block text-end">
                    <div class="header-action-area">
                        <ul class="header-action">
                            <li class="search-item">
                                <a class="action-item" th:href="@{/search}">
                                    <i class="zmdi zmdi-search icon"></i>
                                </a>
                            </li>
                            <li class="currency-menu">
                                <a class="action-item" th:href="@{#/}"><i class="zmdi zmdi-lock-outline icon"></i></a>
                                <ul class="currency-dropdown">
                                    <li class="currency">
                                        <a th:href="@{#/}"><span class="current-currency">我的账户</span></a>
                                        <ul>
                                            <li class="active"><a th:href="@{#/}">个人信息</a></li>
                                            <li class="#/"><a th:href="@{#/}">我的评论</a></li>
                                            <li class="#/"><a th:href="@{#/}">GBP - British Pound</a></li>
                                        </ul>
                                    </li>
                                    <li class="account">

                                        <a th:href="@{#/}"><span class="current-account">其他操作</span></a>

                                        <ul>
                                            <li><a th:href="login">退出登录</a></li>
                                            <li><a th:href="loginOut">注册账号</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="mini-cart">
                                <a class="action-item" href="#/">
                                    <i class="zmdi zmdi-shopping-cart-plus icon"></i>
                                    <span class="cart-quantity" th:if="not (${#lists.size(cartList)} eq 0)">[[${#lists.size(cartList)}]]</span>
                                </a>
                                <div class="mini-cart-dropdown">
                                    <div class="cart-btn">
                                        <a th:href="@{/tCart/carts?userId=4}">View Cart</a>
                                        <a th:href="@{/order/checkout}">Checkout</a>
                                    </div>
                                    <div class="cart-item" th:each="cart:${cartList}">
                                        <div class="thumb">
                                            <a th:href="@{|/tProduct/index?id=${cart.tProduct.id}|}">
                                                <img class="w-100" th:src="@{${cart.tProduct.photo}}" alt="Image-HasTech">
                                            </a>
                                        </div>
                                        <div class="content">
                                            <h5 class="title"><a th:href="@{|/tProduct/index?id=${cart.tProduct.id}|}">[[${cart.tProduct.title}]]</a></h5>
                                            <span class="product-quantity">[[${cart.count}]] ×</span>
                                            <span class="product-price">￥[[${#numbers.formatDecimal(cart.tProduct.price * cart.count * cart.tProduct.discount,0,2)}]]</span>
                                            <a class="cart-trash" href="javascript:void(0);"><i class="fa fa-trash"></i></a>
                                        </div>
                                    </div>
                                    <div class="cart-total-money">
                                        <h5>总&nbsp;&nbsp;计: <span class="money">￥[[${totalMoney}]]</span></h5>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-6 col-sm-1 d-block d-lg-none text-end">
                    <button class="btn-menu" type="button"><i class="zmdi zmdi-menu"></i></button>
                </div>
            </div>
        </div>
    </header>
</div>

</html>